<template>
	<!-- 修改手机号、邮箱 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{type==1?i18n.l047:i18n.l048}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="pt-3">

		</view>
		<view class="formWrap px-5 A-Regular">
			<template v-if="isVerify">
				<!-- 账号 -->
				<view class="formTitle">
					{{type==1?i18n.l049:i18n.l007}}
				</view>
				<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
					<!-- <view v-if="type==1" class="flex align-center">
						<view class="area" :class="model=='light'?'areaLight':''">
							{{i18n.l010}}
						</view>
						<view class="f0">
							<image class="img1" :src="'/static/images/downArrow_'+model+'.png'" mode=""></image>
						</view>
					</view> -->
					<text :class="model=='light'?'inputTextLight':''" style="font-size: 28rpx;">{{ type == 1 ? mobileNumber : email }}</text>
					<!-- <input type="text" v-model="account" :placeholder="type==1?i18n.l050:i18n.l012"
						class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''"> -->
				</view>
				<!-- 验证码 -->
				<view class="formTitle">
					{{i18n.l013}}
				</view>
				<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
					<input type="text" v-model="code" :placeholder="i18n.l014" class="flex-1 inputText A-Medium"
						:class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
					<view v-if="codeText == 60" @click="sendCode" class="codeText A-Medium pl-3">
						{{i18n.l015}}
					</view>
					<view v-else class="codeText A-Medium pl-3">{{codeText + 's'}}</view>
				</view>
			</template>
			<!-- 新账号 -->
			<view class="formTitle">
				{{type==1?i18n.l051:i18n.l053}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="account2" :placeholder="type==1?i18n.l052:i18n.l054"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
			<!-- 验证码 -->
			<view class="formTitle">
				{{i18n.l013}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="code2" :placeholder="i18n.l014" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view v-if="codeText2 == 60" @click="sendCode2" class="codeText A-Medium pl-3">
					{{i18n.l015}}
				</view>
				<view v-else class="codeText A-Medium pl-3">{{codeText2 + 's'}}</view>
			</view>
		</view>
		<view class="codeDesc mt-2 A-Medium mx-6">
			{{ type==1 ? i18n10.n158 : i18n10.n002}}
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-8 clickCss">
			{{i18n.l035}}
		</view>
	</view>
</template>

<script>
	import {
		getMobileVerifyCode,
		getEmailVerifyCode,
		changeMobileNumber,
		changeEmail
	} from "@/core/api/user.js";
	export default {
		data() {
			return {
				type: 1, //1 手机号 2 邮箱
				account:'',//账号
				account2:'',//新账号
				code:'',//验证码
				codeText:60,//
				codeTimer:null,
				code2:'',//验证码
				codeText2:60,//
				codeTimer2:null,
				isVerify:false,//是否需要验证旧账号
				sendFlag: false,
				sendFlag2: false
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.account = this.type == 1 ? this.mobileNumber : this.email
			
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('login');
			},
			i18n2() {
				return this.$t('showToast');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
		},
		onLoad(options) {
			this.type = options.type;
			this.isVerify = options.isVerify==1?true:false;
		},
		methods:{
			async sendCode(){
				if(this.sendFlag){
					return;
				}
				if(this.account===''){
					if(this.type==1){
						this.$tool.showToast(this.i18n2.st001);
					}else if(this.type==2){
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				this.$tool.showLoading();
				this.sendFlag = true;
				this.sendCodeAfter();
				if(this.codeText == 60){
					if (this.type == 1) {
						await getMobileVerifyCode({
							phoneNumber: this.account,
						}).then(res => {
							
						})
					} else if (this.type == 2) {
						await getEmailVerifyCode({
							email: this.account,
						}).then(res => {
							
						})
					}
				}
			},
			// 发送验证吗数据处理
			sendCodeAfter() {
				if(!this.codeTimer){
					this.codeTimer = setInterval(e => {
						if (this.codeText == 0) {
							this.codeText = 60;
							clearInterval(this.codeTimer);
							this.codeTimer = null;
							this.sendFlag = false;
							return;
						}
						this.codeText--;
						uni.hideLoading();
					}, 1000)
				}
			},
			async sendCode2(){
				if(this.sendFlag2){
					return;
				}
				if(this.account2===''){
					if(this.type==1){
						this.$tool.showToast(this.i18n2.st014);
					}else if(this.type==2){
						this.$tool.showToast(this.i18n2.st015);
					}
					return;
				}
				
				this.$tool.showLoading();
				this.sendFlag2 = true;
				this.sendCodeAfter2();
				if(this.codeText2 = 60){
					if (this.type == 1) {
						await getMobileVerifyCode({
							phoneNumber: this.account2,
						}).then(res => {
							
						})
					} else if (this.type == 2) {
						await getEmailVerifyCode({
							email: this.account2,
						}).then(res => {
							
						})
					}
				}
			},
			// 发送验证吗数据处理
			sendCodeAfter2() {
				if(!this.codeTimer2){
					this.codeTimer2 = setInterval(e => {
						if (this.codeText2 == 0) {
							this.codeText2 = 60;
							clearInterval(this.codeTimer2);
							this.codeTimer2 = null;
							this.sendFlag2 = false;
							return;
						}
						this.codeText2--;
						uni.hideLoading();
					}, 1000)
				}
			},
			submit(){
				if(this.isVerify){
					if(this.account===''){
						if(this.type==1){
							this.$tool.showToast(this.i18n2.st001);
						}else if(this.type==2){
							this.$tool.showToast(this.i18n2.st002);
						}
						return;
					}
					if(this.code===''){
						this.$tool.showToast(this.i18n2.st003);
						return;
					}
				}
				if(this.account2===''){
					if(this.type==1){
						this.$tool.showToast(this.i18n2.st014);
					}else if(this.type==2){
						this.$tool.showToast(this.i18n2.st015);
					}
					return;
				}
				if(this.code2===''){
					this.$tool.showToast(this.i18n2.st003);
					return;
				}
				let data = {
					mobileUserId:uni.getStorageSync('mobileUserId'),
					verifyCode:this.code,
					newVerifyCode:this.code2,
				}
				this.$tool.showLoading();
				if(this.type==1){
					data.mobileNumber = this.account;
					data.newMobileNumber = this.account2;
					changeMobileNumber(data).then(res=>{
						uni.setStorageSync('mobileNumber', this.account2);
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}else if(this.type==2){
					data.email = this.account;
					data.newEmail = this.account2;
					changeEmail(data).then(res=>{
						uni.setStorageSync('email', this.account2);
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			submitAfter(){
				uni.hideLoading();
				this.$tool.showToast(this.i18n2.st013);
				setTimeout(res=>{
					this.$tool.goBack(2);
				},800)
			}
		}
	}
</script>

<style scoped lang="scss">
	.codeDesc {
		font-size: 24rpx;
		color: #7F838D;
	}
	.p-stickyLight {
		background: #fff;
	}
	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}
		.inputWrap {
			width: 650rpx; 
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;
			// .area {
			// 	font-size: 28rpx;
			// 	color: #AAACB8;
			// }
			// .areaLight {
			// 	color: #7F838D;
			// }
			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}
			
			.inputTextLight {
				color: #0E0F11;
			}
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
			.placeholderClassLight {
				color: #B5B7BF;
			}
			// .img1 {
			// 	width: 15rpx;
			// 	height: 11rpx;
			// 	margin-left: 16rpx;
			// 	margin-right: 42rpx;
			// }
			.img2 {
				width: 40rpx;
				height: 40rpx;
			}
			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}
		.inputWrapLight {
			background: #FFFFFF;
		}
	}
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>